<template>
  <view>
    <view class="img">
      <image src="https://syh-2.oss-cn-shanghai.aliyuncs.com/logo.png"></image>
      <text>欢迎来到省运慧！</text>
    </view>
    <view class="section">
      <view class="section_xx">
        <text>账号登陆</text>
        <p>微信一键登录</p>
      </view>
	  <view class="section_box">
	    <u-button type="success" @click="GetWeiXinLogin()">微信</u-button>
	  </view>
    <!--  <view class="section_key">
        <view class="section_key1">
          <u-icon name="account-fill" size="28"></u-icon>
          <input type="text" v-model="telphone" placeholder="手机号码" />
        </view>
        <view class="section_key1">
          <u-icon name="lock-open" size="28"></u-icon>
          <input type="text" v-model="smimashe" placeholder="验证码" />
          <view class="wrap">
            <u-toast ref="uToast"></u-toast>
            <u-code
              :seconds="seconds"
              @end="end"
              @start="start"
              ref="uCode"
              @change="codeChange"
            ></u-code>
            <u-button type="warning" @tap="getCode">{{ tips }}</u-button>
          </view>
        </view>
      </view> -->

      <view class="checkbox">
        <u-row>
          <u-col span="4">
            <u-checkbox-group v-model="isChecked">
              <u-checkbox name="agree" shape="circle" v-bind:label="agreeText" :checked="isChecked">
                {{ agreeText }}
              </u-checkbox>
            </u-checkbox-group>
          </u-col>
          <u-col span="8"
            ><u-text
              text="《平台用户服务协议》"
              @click="openAgreement(2)"
            ></u-text>
          </u-col>
        </u-row>
      </view>
     <!-- <view class="section_box">
        <u-button type="error" @click="MobileLogin()">登陆</u-button>
      </view> -->
     
    </view>
    <u-modal
      :show="showAgreement"
      title="用户服务协议"
      confirmText="同意"
      @confirm="closeAgree()"
      height="500px"
    >
      <view style="height: 380upx; overflow-y: scroll">
        <rich-text :nodes="conAgreement"></rich-text>
      </view>
    </u-modal>
  </view>
</template>

<script>
import {
  SendVeriCode,
  MobileLogin,
  GetWeiXinMobileLogin,
  BindWeiXin,
  GetWeiXinLogin,
  GetUserPhoneNumber,
  serviceAgreement,
} from "@/public/Api/update.js";
import { setValue, getValue } from "@/public/storeage/index.js";
export default {
  data() {
    return {
      defaultNum: "",
      sxinmin: "",
      sshfeizh: "",
      telphone: "",
      smimashe: "",
      seconds: 60,
      tips: "",
      agreeText: "已阅读并同意",
      isChecked: false,
      show: false,
      code: "",
      mobile: "",
      showAgreement: false,
      conAgreement: "",
    };
  },
  onLoad() {},
  methods: {
    numberInputResult(e) {
      console.log("结果--" + e);
    },
    open() {
      // console.log('open');
    },
    close() {
      this.show = false;
      // console.log('close');
    },
    codeChange(text) {
      this.tips = text;
      console.log(text);
    },
    async getCode() {
      var templateCode = "SMS_256035332";
      var phoneNumbers = this.telphone;
      if (phoneNumbers == "") {
        uni.showToast({
          title: "手机号不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: "正在获取验证码",
        });
        try {
          const { data: res } = await SendVeriCode({
            templateCode,
            phoneNumbers,
          });
          this.result = res.result;
        } catch (e) {}
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$u.toast("验证码已发送");
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.$u.toast("倒计时结束后再发送");
      }
    },
    end() {
      uni.$u.toast("倒计时结束");
    },
    start() {
      uni.$u.toast("60s后可重新发送");
    },
    async MobileLogin() {
      var userName = this.telphone;
      var password = this.smimashe;
      var isChecked = this.isChecked;
      if (userName == "") {
        uni.showToast({
          title: "手机号不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (password == "") {
        uni.showToast({
          title: "验证码不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (isChecked == false) {
        uni.showToast({
          title: "请阅读并同意《平台用户服务协议》",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      try {
        const { data: res } = await MobileLogin({
          userName,
          password,
        });
        console.log(res, "resres");
        if (res.result.success == false) {
          uni.showToast({
            title: `${res.result.message}`,
            icon: "none",
            duration: 1200,
          });
          return false;
        }
        if (res.result.success == true) {
          uni.showToast({
            title: "登陆成功",
            icon: "success",
          });
          setValue("roles", res.result.data.roles);
          setValue("id", res.result.data.id);
          setValue("mobile", res.result.data.mobile);
          setValue("wxOpenId", res.result.data.wxOpenId);
          setValue("status", res.result.data.status);
          setValue("approved", res.result.data.approved);
          this.DoBindWeiXin(userName);
          if (res.result.data.status !== "正常") {
            uni.reLaunch({
              url: "/pages/Loginas/index",
            });
            return false;
          }

          setTimeout(() => {
            if (res.result.data.roles == "司机") {
              uni.reLaunch({
                url: "/pages/index/sjindex",
              });
            } else {
              uni.reLaunch({
                url: "/pages/index/index",
              });
            }
          }, 1000);
        }
      } catch (e) {}
    },
    getPhoneNumber(e) {
      this.code = e.detail.code;
    },
    async GetUserPhoneNumber() {
      var code = this.code;
      try {
        const { data: res } = await GetUserPhoneNumber({
          code,
        });

        var data = JSON.parse(res.result);
        console.log(data, "res");
        this.mobile = data.phone_info.phoneNumber;
        this.GetWeiXinMobileLogin();
      } catch (e) {}
    },
    DoBindWeiXin(mobile) {
      wx.login({
        success: async function (res) {
          var code = res.code;
          if (code) {
            BindWeiXin(code, mobile);
          }
        },
      });
    },
    async GetWeiXinLogin() {
      var isChecked = this.isChecked;
      if (isChecked == false) {
        uni.showToast({
          title: "请阅读并同意《平台用户服务协议》",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      wx.login({
        success: async function (res) {
			console.log(res)
          var code = res.code;
          if (code) {
            const { data: res } = await GetWeiXinLogin({
              code,
            });
            setValue("id", res.result.id);
            setValue("roles", res.result.roles);
            setValue("wxOpenId", res.result.wxOpenId);
            setValue("status", res.result.status);
            setValue("approved", res.result.approved);
            if (res.result.status !== "正常") {
              uni.reLaunch({
                url: "/pages/Loginas/index",
              });
              return false;
            }
            setTimeout(() => {
              if (res.result.roles == "司机") {
                uni.reLaunch({
                  url: "/pages/index/sjindex",
                });
              } else {
                uni.reLaunch({
                  url: "/pages/index/index",
                });
              }
            }, 1000);
          }
        },
      });
    },
    // 微信授权登录
    async GetWeiXinMobileLogin() {
      var mobile = this.mobile;
      var isChecked = this.isChecked;
      var roles = getValue("roles");
      if (isChecked == false) {
        uni.showToast({
          title: "请阅读并同意《平台用户服务协议》",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      try {
        const { data: res } = await GetWeiXinMobileLogin({
          mobile,
        });
        // setValue("wxOpenId", res.result.wxOpenId);

        if (res.success == true) {
          uni.showToast({
            title: "登陆成功",
            icon: "success",
          });
          setValue("id", res.result.id);
          setValue("roles", res.result.roles);
          setValue("wxOpenId", res.result.wxOpenId);
          setValue("status", res.result.status);
          setValue("approved", res.result.approved);
          setTimeout(() => {
            if (roles == "司机") {
              uni.reLaunch({
                url: "/pages/index/sjindex",
              });
            } else {
              uni.reLaunch({
                url: "/pages/index/index",
              });
            }
          }, 1000);
        } else {
          uni.showToast({
            title: "登陆成功",
            icon: "success",
          });
        }
      } catch (e) {}
    },
    //服务协议
    async openAgreement(id) {
      try {
        const { data: res } = await serviceAgreement({
          id,
        });
        this.showAgreement = true;
        this.conAgreement = res.result.contents;
      } catch (e) {}
    },
    closeAgree() {
      this.showAgreement = false;
      this.isChecked = true;
    },
  },
};
</script>

<style lang="scss">
.img {
  margin-top: 180upx;
  display: flex;
  align-items: center;
  justify-content: left;

  image {
    width: 114upx;
    height: 117upx;
    margin-left: 50upx;
    margin-right: 20upx;
  }

  text {
    font-size: 48upx;
    font-weight: bold;
  }
}

.section {
  .section_xx {
	text-align: center;
    font-size: 48upx;
    color: #000;
    padding-top: 180upx;
    // padding-left: 53upx;

    text {
      font-weight: bold;
    }

    p {
      font-size: 30upx;
      color: rgba(128, 128, 128, 1);
      margin-top: 10upx;
    }
  }

  .section_hz {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 65upx;
    width: 722upx;
    margin: 0 auto;
    // border-bottom: 2upx solid rgba(229, 229, 229, 1);
    // padding-bottom: 35upx;

    text {
      font-size: 38upx;
      font-weight: bold;
      color: #000;
      padding: 0 200upx 0 40upx;
    }

    image {
      width: 35upx;
      height: 35upx;
    }
  }

  .section_key {
    padding: 15upx 43upx 0;
    margin-top: 50upx;

    .section_key1 {
      width: 100%;
      height: 71.85upx;
      opacity: 1;
      margin-top: 50upx;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(204, 204, 204, 1);
      padding-bottom: 30upx;

      text {
        font-size: 50upx;
        margin: 0 10upx;
        color: rgba(204, 204, 204, 1);
      }

      input {
        border-left: 1px solid rgba(204, 204, 204, 1);
        text-align: center;
        font-size: 24.53upx;
        padding-left: 15px;
      }

      .wrap {
        width: 270upx;
        text-align: right;
        line-height: 46upx;
        font-size: 24upx;
      }
    }
  }

  .checkbox {
    margin: 0upx auto 60upx 100upx;
  }

  .section_box {
    margin:10% auto ;
	
    width: 80%;
  }
}

.popup {
  height: 200upx;

  .section {
    border: 1px solid #51c232;
    width: 80%;
    line-height: 120upx;
    font-size: 40upx;
    font-weight: bold;
    text-align: center;
    background-color: #51c232;
    color: #fff;
    margin: 0 auto;
    border-radius: 10upx;
    margin-top: 10%;
  }
}

.screenshot {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;

  .screenshot_key {
    width: 676.4upx;
    height: 420upx;
    opacity: 1;
    background: #ffffff;
    box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20upx;
    padding: 50upx 70upx;

    .image_gb {
      width: 32upx;
      height: 32upx;
      position: absolute;
      top: 18upx;
      right: 68upx;
    }

    .screen_top {
      view {
        font-size: 35upx;
        font-weight: bold;
        padding-bottom: 30upx;
        border-bottom: 2upx solid #e5e5e5;
      }

      text {
        display: block;
        font-size: 40upx;
        color: #383838;
        line-height: 60upx;
        padding-top: 30upx;
        text-align: center;
      }
    }

    .screen_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 70upx;

      view {
        width: 231upx;
        height: 72upx;
        border-radius: 20upx;
        background-color: #f04d3e;
        text-align: center;
        line-height: 72upx;
        font-size: 31upx;
        font-weight: bold;
        color: #fff;
      }

      .boxte {
        background-color: #e5e5e5;
        color: #000;
      }

      button {
        width: 231upx;
        line-height: 72upx;
        background-color: #e5e5e5;
        color: #000;
        font-weight: bold;
      }
    }
  }
  .slot-content {
    height: 380upx !important;
    overflow-y: scroll;
  }
}
</style>
